<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kimi K2 知识问答</title>
<style>
    :root{
        --bg:#111;
        --fg:#0ff;
        --err:#ff0055;
        --ok:#39ff14;
        --card:#222;
        --ok-d:#004d1a;
        --err-d:#660022;
    }
    *{margin:0;padding:0;box-sizing:border-box;font-family:'JetBrains Mono',SFMono-Regular,Consolas,'Courier New',monospace;}
    body{background:var(--bg);color:var(--fg);display:flex;height:100vh;align-items:center;justify-content:center;overflow:hidden;}
    .crt::before{
        content:'';
        position:fixed;top:0;left:0;width:100%;height:100%;
        background:repeating-linear-gradient(0deg,rgba(0,255,255,.03) 0 1px,transparent 1px 2px);
        pointer-events:none;z-index:10;
        animation:scan 4s linear infinite;
    }
    @keyframes scan{0%{background-position:0 0}100%{background-position:0 100%}}
    .container{
        width:94%;max-width:420px;background:var(--card);
        border:3px solid var(--fg);padding:28px 24px;
        box-shadow:8px 8px 0 var(--fg);
    }
    h1{font-size:26px;text-transform:uppercase;text-shadow:0 0 6px var(--fg);}
    .timer{font-size:22px;margin:12px 0;letter-spacing:.1em;}
    .progress{height:8px;background:#000;border:2px solid var(--fg);margin-bottom:18px;}
    .progress-bar{height:100%;background:var(--fg);transition:width .4s;}
    .question-text{font-size:18px;line-height:1.4;margin-bottom:20px;}
    .options{display:flex;flex-direction:column;gap:12px;}
    .option{
        background:#000;border:2px solid var(--fg);color:var(--fg);
        padding:14px 18px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
        user-select:none;
    }
    .option:active{transform:scale(.97);}
    .option.disabled{pointer-events:none;}
    .option.ok{background:var(--ok-d);border-color:var(--ok);color:var(--ok);}
    .option.err{background:var(--err-d);border-color:var(--err);color:var(--err);}
    .modal{
        position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;
        align-items:center;justify-content:center;z-index:20;
    }
    .modal-content{
        background:var(--card);border:3px solid var(--ok);
        padding:30px 25px;max-width:320px;text-align:center;
        box-shadow:10px 10px 0 var(--ok);
    }
    .modal-content h2{font-size:24px;color:var(--ok);margin-bottom:12px;}
    .modal-content p{line-height:1.5;margin-bottom:8px;}
    .btn{
        background:#000;border:2px solid var(--fg);color:var(--fg);
        padding:12px 30px;font-size:16px;cursor:pointer;margin-top:12px;
    }
    .btn:active{transform:scale(.95);}
</style>
<script>
/* 纯触摸判定：必须支持 touch 且未检测到鼠标才能继续 */
(function(){
    const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    if(!isTouch){
        alert('请使用手机答题');
        document.documentElement.style.display='none';
    }
})();
</script>

</head>
<body class="crt">
<div class="container">
    <div id="welcomeScreen">
        <h1>Kimi K2 答题挑战</h1>
        <button class="btn" onclick="startQuiz()">START</button>
    </div>

    <div id="quizScreen" style="display:none">
        <div class="timer" id="timer">00:00.000</div>
        <div class="progress"><div id="progressBar" class="progress-bar" style="width:0"></div></div>
        <div id="questionText" class="question-text"></div>
        <div id="options" class="options"></div>
    </div>
</div>

<div id="resultModal" class="modal">
    <div class="modal-content">
        <h2>MISSION CLEAR!</h2>
        <p id="timeText">--:--.---</p>
        <p>截图留念，凭图领奖！</p>
        <button class="btn" onclick="closeModal()">OK</button>
    </div>
</div>

<script>
const questions=[
{q:"Kimi K2 发布一个月，它在开源平台 Hugging Face 上的下载量最接近哪个数？",o:["500","5,000","50,000","500,000"],c:3},
{q:"在Google主办的全球八大顶尖模型AI国际象棋对抗赛上，Kimi K2 输给了谁？",o:["冠军 OpenAI o3","亚军 Grok 4","季军Gemini 2.5 Pro","第四名 o4 mini"],c:0},
{q:"哪个公司的 CEO 发 Twitter 说 Kimi  K2 在其内部评估中表现不错，他们将基于 Kimi K2 做后训练。",o:["百度","Perplexity","Adobe","DuckDuckGo"],c:1},
{q:"以下哪个媒体没有报道 Kimi K2？",o:["自然Nature","经济学人The Economist","外交事务Foreign Affairs","纽约客The New Yorker"],c:3},
{q:"大模型竞技场 LMArena 上，Kimi K2 在开源模型中最高排名是多少？",o:["第一","第三","第五","第七"],c:0},
{q:"Kimi K2在预训练中使用了哪个优化器？",o:["MuonClip","Adam","Moonshot","Sophia"],c:0},
{q:"以下哪个编程IDE没有官方接入 Kimi K2？",o:["Cursor","Windsurf","Trae","Mikicode"],c:3},
{q:"Kimi K2 的总参数有多少？",o:["1万亿","1千亿","1百亿","1亿"],c:0},
{q:"以下谁是 Kimi K2 技术报告中的贡献者？",o:["Kimi K2","李彧珩","赵昪翀","周婠祎"],c:0},
{q:"以下哪个产品没有接入 Kimi K2？",o:["Genspark","flowith","OpenRouter","Twitter"],c:3}
];

let quiz=[],idx=0,start=0,tmr=null,cnt=0;
const shuffle=a=>{for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]]}return a};

function prep(){
    quiz=questions.map(q=>{
        const opts=q.o.map((t,i)=>({text:t,orig:i}));
        shuffle(opts);
        return{q:q.q,opts,correct:opts.findIndex(o=>o.orig===q.c)}
    });
    shuffle(quiz);
}

function startQuiz(){
    prep();
    document.getElementById('welcomeScreen').style.display='none';
    document.getElementById('quizScreen').style.display='block';
    start=performance.now();
    tmr=setInterval(()=>{
        const e=performance.now()-start;
        const m=Math.floor(e/60000),s=Math.floor((e%60000)/1000),ms=Math.floor(e%1000);
        document.getElementById('timer').textContent=`${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}.${ms.toString().padStart(3,'0')}`;
    },37);
    showQ();
}

function showQ(){
    const q=quiz[idx];
    document.getElementById('questionText').textContent=q.q;
    document.getElementById('progressBar').style.width=`${(idx+1)/10*100}%`;
    const box=document.getElementById('options');
    box.innerHTML='';
    q.opts.forEach((o,i)=>{
        const d=document.createElement('div');
        d.className='option';
        d.dataset.idx=i;
        d.innerHTML=`${o.text}<span></span>`;
        d.onclick=()=>select(d);
        box.appendChild(d);
    });
}

function select(el){
    const q=quiz[idx];
    const all=[...document.querySelectorAll('.option')];
    all.forEach(o=>o.classList.add('disabled'));
    if(+el.dataset.idx===q.correct){
        el.classList.add('ok');
        el.querySelector('span').textContent=' ✅';
        cnt++;
    }else{
        el.classList.add('err');
        el.querySelector('span').textContent=' ❌';
    }
    setTimeout(()=>{idx++;idx<10?showQ():finish()},500);
}

function finish(){
    clearInterval(tmr);
    if(cnt===10){
        const e=performance.now()-start;
        const m=Math.floor(e/60000),s=Math.floor((e%60000)/1000),ms=Math.floor(e%1000);
        const t=`${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}.${ms.toString().padStart(3,'0')}`;
        document.getElementById('timeText').textContent=t;
        document.getElementById('resultModal').style.display='flex';
    }else{
        alert('挑战失败！');
        location.reload();
    }
}

function closeModal(){
    document.getElementById('resultModal').style.display='none';
}
</script>
</body>
</html>